<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'


const props = defineProps<{
  defaultValue?:Boolean;
  modelValue?: Boolean;
  class?: HTMLAttributes['class'];
  disabled: Boolean;
}>()

const emits = defineEmits<{
  (e: 'update:modelValue', payload: Boolean): void
}>()

const modelValue = useVModel(props, 'modelValue', emits, {
  passive: true,
  defaultValue: props.defaultValue,
})
// console.log(props,'props')
</script>

<template>
    <CheckboxRoot
    v-model:checked="modelValue"
    :disabled="disabled"
    class="shadow-blackA7 hover:bg-green3 flex h-[18px] w-[18px] appearance-none items-center justify-center rounded-[4px] bg-white"
    >
    <CheckboxIndicator class="bg-primary h-full w-full rounded flex items-center justify-center">
        <Icon
        icon="radix-icons:check"
        class="h-4 w-4 text-white"
        />
    </CheckboxIndicator>
    </CheckboxRoot>
    <span class="select-none text-white"></span>
</template>
